<template>
  <div class="system-group" :class="{ hide: !_d.showArticle }">
  	<div class="btn" @click="_d.showArticle = !_d.showArticle"></div>
		<div class="right-wp">
			<div class="right-ct">
  			<div class="title">快速使用手册</div>
	  		<div class="list">
	  			<div v-for="(item, index) in _d.articleList" :key="index" class="item" @click="showArticle(item)">{{item.name}}</div>
	  		</div>
  		</div>

  		<div class="contact-box">
  			<a-image width="100%" :src="ewmImg"/>
  			<div class="mt-5">如果您觉得还可以，转发、打赏随便给一个。</div>
  			<div>联系我们：18580109057</div>
  		</div>

  		<div class="system-box">
		  	<div class="item" @click="showUpdatePwd()">
					<img src="@/assets/image/pwd.png"/>
					<span>更改密码</span>
				</div>
				<div class="item" @click="showUserInfo()">
					<img src="@/assets/image/user.png"/>
					<span>我的账户</span>
				</div>
				<!-- <div class="item">
					<img src="@/assets/image/top.png"/>
					<span>升级</span>
				</div> -->
				<div class="item" @click="loginOut()">
					<img src="@/assets/image/exit.png"/>
					<span>退出</span>
				</div>
		  </div>
		</div>

	  <mHelp v-if="!_d.isMobil" ref="mHelpRef"></mHelp>

	  <articleModal ref="articleModalRef"></articleModal>
	  <updatePwdModal ref="updatePwdModalRef"></updatePwdModal>
	  <userInfoModal ref="userInfoModalRef"></userInfoModal>
  </div>

	  
</template>

<script setup>
	import { reactive, ref, onMounted } from 'vue'
	import {Modal, notification} from "ant-design-vue";
	import {ApiGet, ApiPost, ApiDownGet} from "@/api/request.js"
	import articleModal from "./articleModal.vue";
	import updatePwdModal from "@/views/user/modules/updatePwdModal.vue";
	import userInfoModal from "@/views/user/modules/userInfoModal.vue";
	import mHelp from "@/components/mHelp/index.vue";
	import ewmImg from "@/assets/image/ewm.jpg"

	import {useUserStore} from '@/store/userStore';


	const userStore = useUserStore();
	const articleModalRef = ref();
	const updatePwdModalRef = ref();
	const userInfoModalRef = ref();

	const _d = reactive({
		isMobil: false,

		showArticle: true,
		articleList: []
	})
	
	onMounted(() => {
		getArticleList();
	})

	function getArticleList() {
		ApiGet('Document/getdocumentenable').then(res => {
			_d.articleList = res.data;
		})
	}

	// 显示文章
	function showArticle(record) {
		articleModalRef.value.open(record.id);
	}

	// 显示修改密码
	function showUpdatePwd() {
		updatePwdModalRef.value.open();
	}

	// 显示我的账户
	function showUserInfo() {
		userInfoModalRef.value.open();
	}

	function loginOut() {
		Modal.confirm({
			title: '提示',
			content: '请确认是否登出？',
			okText: '确定',
      cancelText: '取消',
			onOk() {
				userStore.logout();
			},
		});
	}

</script>

<style lang="less" scoped>
.system-group {
	position: relative;
	background: #232527;
	&.hide {
		.btn:before {
			content: '<';
		}
		.right-wp {
			width: 0;
			opacity: 0;
		}
	}
	.btn {
		position: absolute;
		z-index: 10;
		right: 100%;
		top: 50%;
		padding-left: 5px;
		width: 22px;
		height: 30px;
		border-top-left-radius: 15px;
		border-bottom-left-radius: 15px;
		background: #232527;
		text-align: center;
		overflow: hidden;
		cursor: pointer;
		&:before {
			content: '>';
			font-size: 20px;
			color: #fff;
			font-weight: 600;
			line-height: 30px;
			font-family: '宋体';
		}
	}
	.right-wp {
		height: 100%;
		width: 200px;
		overflow: hidden;
		transition: .3s all;
		display: flex;
		flex-direction: column;
	}
	.right-ct {
		display: flex;
		flex-direction: column;
		padding: 5px 0 10px;
		width: 200px;
		height: 0;
		flex: 1;
	}
	
	.title {
		margin: 0 5px 10px;
		background: #fff;
		border-radius: 4px;
		height: 46px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.list {
		height: 0;
		flex: 1;
		overflow: auto;
		.item {
			height: 44px;
			line-height: 44px;
			padding: 0 15px;
			color: #fff;
			cursor: pointer;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			&:hover {
				background: #3B3C48;
			}
		}
	}

	.contact-box {
		padding: 5px 10px;
		color: #fff;
		text-align: center;
	}

	.system-box {
		border-top: 2px solid #444446;
		padding: 10px 0 10px;
		.item {
			display: flex;
			align-items: center;
			padding: 0 12px;
			height: 40px;
			color: #fff;
			cursor: pointer;
			&:hover {
				background: #3B3C48;
			}
			img {
				margin-right: 10px;
				width: 15px;
			}
		}
	}

}
</style>